<template>
	<div class="mainDiv" style="padding:10px;box-sizing: border-box;color:#000">
		<h4>请选择产品类型</h4>
		<el-collapse accordion style="height:100%">
			<el-collapse-item v-for="main in mainbranch" :key="main.children">
				<template slot="title">{{main.name}}</template>
				<el-table :data="main.children" @row-click="mouseclick" @row-dblclick="mousedblclick" :row-key="getrowkeys" :expand-row-keys="selectbranch">
					<el-table-column prop="id" label="分类ID"></el-table-column>
					<el-table-column prop="name" label="分类名称"></el-table-column>
					<el-table-column prop="addtime" label="添加时间">
						<template scope="scope">
							{{time(scope.row.addtime)}}
						</template>
					</el-table-column>
					<el-table-column label="选择">
						<template scope="scope">
							<el-switch v-model="scope.row.isdisable" on-text="是" off-text="否">
							</el-switch>
						</template>
					</el-table-column>
				</el-table>
			</el-collapse-item>
		</el-collapse>
		<el-row style="margin-top:10px !important;text-align: right;">
			<el-button size="mini" icon="close" type="danger" @click="close" style="margin-left:10px;">取消关闭</el-button>
			<el-button size="mini" icon="upload2" type="success" @click="submit">确定选择</el-button>
		</el-row>
	</div>
</template>
<script>
import C from '#/src/common/common.js'
export default {
    name: 'selectcategory',
    data () {
        return {
            mainbranch: [],
            subbranch: [],
            selectbranch: [],
        }
    },
    mounted () {
        this.getbranch()
    },
    methods: {
        getrowkeys: function (row) {
            return row.id
        },
        mouseclick: function (row, event) {
            event.preventDefault()
            this.subbranch.forEach((col) => {
                col.isdisable = false
            })
            row.isdisable = true
            this.selectbranch.push(row)
        },
        mousedblclick: function (row, event) {
            event.preventDefault()
            C.closeBrowserWindow(row)
        },
        getbranch: async function () {
            var that = this
            let data = await C.ajax('/organization/popup/categorylist', this.page, 'post')
            if (data) {
                that.mainbranch = data.p
                that.subbranch = data.c
                for (var i = 0; i < that.mainbranch.length; i++) {
                    that.mainbranch[i].children = []
                    for (var j = 0; j < that.subbranch.length; j++) {
                        if (that.subbranch[j].pid === that.mainbranch[i].id) {
                            that.mainbranch[i].children.push(that.subbranch[j])
                        }
                    }
                }
            }
        },
        time: function (unix) {
            let tm = new Date(unix * 1000)
            let yy = tm.getFullYear()
            let mm = tm.getMonth() < 9 ? '0' + (tm.getMonth() + 1) : tm.getMonth() + 1
            let dd = tm.getDate() < 10 ? '0' + tm.getDate() : tm.getDate()
            return yy + '-' + mm + '-' + dd
        },
        close: function () {
            C.closewin()
        },
        submit: function (row) {
            var aaa = {}
            this.subbranch.forEach((res) => {
                if (res.isdisable === true) {
                    aaa = res
                }
            })
            if (aaa.id) {
                C.closeBrowserWindow(aaa)
            } else {
                C.error('请选择分类')
                return false
            }
        }
    }
}
</script>
<style>
h4 {
  margin: 0 0 10px !important;
}
.el-collapse {
  height: 630px;
  overflow: auto;
}

.el-collapse-item__arrow {
    margin-right: 18px;
}
</style>